<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link href="../css/tab.css" rel="stylesheet">
    <script src="../js/tab.js" type="text/javascript"></script>
    <!--    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
    <script src="../js/jquery.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        table, tr, td {
            border: 1px solid black;
        }

        td {
            width: 300px; /*这里需要自己调整，根据自己的需求调整宽度*/
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        svg {
            width: 36px;
            height: 36px;
        }
    </style>
</head>
<body>
<!--选项卡-->
<div id="tab">
    <!--选项的头部-->
    <div id="tab-header">
        <ul>
            <li class="selected">周一</li>
            <li>周二</li>
            <li>周三</li>
            <li>周四</li>
            <li>周五</li>
            <li>周六</li>
            <li>周日</li>
        </ul>
    </div>
    <!--主要内容-->
    <div id="tab-content">
        <div class="dom" style="display: block;">
            <h2 align="center">周一实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day1-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day1-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day1-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day1-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周二实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day2-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day2-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day2-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day2-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周三实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day3-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day3-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day3-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day3-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周四实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day4-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day4-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day4-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day4-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周五实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day5-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day5-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day5-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day5-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周六实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day6-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day6-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day6-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day6-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周日实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day7-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day7-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day7-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day7-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script>
    //获取登录状态
    $(function () {
        $.ajax({
            type: "post",
            url: "http://localhost:8080/user/getCurrentUser",
            success: function (result) {
                let res = result.object;
                if (result.code == '200') {
                    document.getElementById("username").innerText = res.username;
                    if (res.priority == '0') {
                        document.getElementById("bookButton").style.display = "none";
                    }
                } else {
                    alert("请先登录账号！");
                    window.location.href = "login.html";
                }
            }
        });
    });

    //显示实验室开放时间
    let day = [1, 2, 3, 4, 5, 6, 7];
    let time = ["08:00-09:40", "10:00-11:40", "14:00-15:40", "16:00-17:40"];
    for (let d = 0; d < day.length; d++) {
        for (let t = 0; t < time.length; t++) {
            let data = {"day": day[d], "time": time[t]};
            $.post('http://localhost:8080/time/findLabNameByTime', data, function (result) {
                let res = result.object;
                let htm = "";
                if (t == '0') {
                    htm += "<td>08:00-09:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                } else if (t == '1') {
                    htm += "<td>10:00-11:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                } else if (t == '2') {
                    htm += "<td>14:00-15:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                } else if (t == '3') {
                    htm += "<td>14:00-15:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                }
                let dd = d + 1;
                let tt = t + 1;
                $("#day" + dd + "-t" + tt).html(htm);
            });
        }
    }
</script>
</body>
</html>